<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
label, input{vertical-align:middle;}
.pColor{border:1px solid #CCC;margin:0;padding:0;}
</style>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#bdc').change(function(){
		var bdc = $('#bdc').val();
		$('table th, table td').css("border","1px solid "+bdc);
	})
	$('#th-bgc').change(function(){
		var thbgc = $('#th-bgc').val();
		$('table th, table td').css("background", thbgc);
	})
});
</script>
</head>
<body>


<input type="text" pattern="#(?:[0-9A-F]{3}|[0-9A-F]{3})" />
<table>
<tr>
<th><label for="bdc">边框颜色</label></th>
<td><input type="color" name="bdc" id="bdc" class="pColor" /></td>
</tr>
<tr>
<th><label for="th-bgc">th背景颜色</label></th>
<td><input type="color" name="thbgc" id="th-bgc" class="pColor" /></td>
</tr>
<tr>
<th><label for="td-bgc">td背景颜色</label></th>
<td><input type="color" name="tdbgc" id="td-bgc" class="pColor" /></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
